今天來做編輯器 Editor，

PrimeVue 的 Editor 的組件，它是基於 Quill 編輯器構建的。Quill 是一個功能強大的富文本編輯器，支持多種文本格式和操作。

It’s up to you how far you’ll go.
能走多遠取決於你自己。

以下為範例:

<template>
    <div class="card">
        <Editor v-model="value" editorStyle="height: 320px">
            <template v-slot:toolbar>
                <span class="ql-formats">
                    <button v-tooltip.bottom="'Bold'" class="ql-bold"></button>
                    <button v-tooltip.bottom="'Italic'" class="ql-italic"></button>
                    <button v-tooltip.bottom="'Underline'" class="ql-underline"></button>
                </span>
            </template>
        </Editor>
    </div>
</template>

<script setup>
import { ref } from "vue";

const value = ref('<div>Hello World!</div><div>PrimeVue <b>Editor</b> Rocks</div><div><br></div>');
</script>

• Editor:
  這是 PrimeVue 提供的富文本編輯器組件。它使用 Quill 編輯器 來提供文本編輯功能。
• v-model="value":
  使用 v-model 雙向綁定來將編輯器的內容與 value 變量同步。當編輯器的內容改變時，value 也會更新，反之亦然。
• editorStyle="height: 320px":
  設置編輯器的高度為 320 像素。
• template v-slot:toolbar:
  自定義編輯器的工具欄。工具欄包含了三個按鈕，分別用於設定文本為粗體（Bold）、斜體（Italic）和下劃線（Underline）。
• v-tooltip.bottom: 用於顯示提示框，告訴用戶每個按鈕的功能。

參考資料
https://primevue.org/editor/